<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=custom-gauge
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
    <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
    <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
    <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
    <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;



        var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
        
        var _animationDuration = 1000;
        var _animationDurationUpdate = 1000;
        var _animationEasingUpdate = 'quarticInOut';
        var _valOnRadianMax = 200;
        var _outerRadius = 200;
        var _innerRadius = 170;
        var _pointerInnerRadius = 40;
        var _insidePanelRadius = 140;
        var _currentDataIndex = 0;

        function renderItem(params, api) {
            var valOnRadian = api.value(1);
            var coords = api.coord([api.value(0), valOnRadian]);
            var polarEndRadian = coords[3];
            var imageStyle = {
                image: _panelImageURL,
                x: params.coordSys.cx - _outerRadius,
                y: params.coordSys.cy - _outerRadius,
                width: _outerRadius * 2,
                height: _outerRadius * 2
            };

            return {
                type: 'group',
                children: [{
                    type: 'image',
                    style: imageStyle,
                    clipPath: {
                        type: 'sector',
                        shape: {
                            cx: params.coordSys.cx,
                            cy: params.coordSys.cy,
                            r: _outerRadius,
                            r0: _innerRadius,
                            startAngle: 0,
                            endAngle: -polarEndRadian,
                            transition: 'endAngle',
                            enterFrom: { endAngle: 0 }
                        }
                    }
                }, {
                    type: 'image',
                    style: imageStyle,
                    clipPath: {
                        type: 'polygon',
                        shape: {
                            points: makePionterPoints(params, polarEndRadian)
                        },
                        extra: {
                            polarEndRadian: polarEndRadian,
                            transition: 'polarEndRadian',
                            enterFrom: { polarEndRadian: 0 }
                        },
                        during: function (apiDuring) {
                            apiDuring.setShape(
                                'points',
                                makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
                            );
                        }
                    }
                }, {
                    type: 'circle',
                    shape: {
                        cx: params.coordSys.cx,
                        cy: params.coordSys.cy,
                        r: _insidePanelRadius
                    },
                    style: {
                        fill: '#fff',
                        shadowBlur: 25,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(76,107,167,0.4)'
                    }
                }, {
                    type: 'text',
                    extra: {
                        valOnRadian: valOnRadian,
                        transition: 'valOnRadian',
                        enterFrom: { valOnRadian: 0 }
                    },
                    style: {
                        text: makeText(valOnRadian),
                        fontSize: 50,
                        fontWeight: 700,
                        x: params.coordSys.cx,
                        y: params.coordSys.cy,
                        fill: 'rgb(0,50,190)',
                        align: 'center',
                        verticalAlign: 'middle',
                        enterFrom: { opacity: 0 }
                    },
                    during: function (apiDuring) {
                        apiDuring.setStyle('text', makeText(apiDuring.getExtra('valOnRadian')));
                    }
                }]
            };
        }

        function convertToPolarPoint(renderItemParams, radius, radian) {
            return [
                Math.cos(radian) * radius + renderItemParams.coordSys.cx,
                -Math.sin(radian) * radius + renderItemParams.coordSys.cy
            ];
        }

        function makePionterPoints(renderItemParams, polarEndRadian) {
            return [
                convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
                convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian + Math.PI * 0.03),
                convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
            ];
        }

        function makeText(valOnRadian) {
            // Validate additive animation calc.
            if (valOnRadian < -10) {
                alert('illegal during val: ' + valOnRadian);
            }
            return (valOnRadian / _valOnRadianMax * 100).toFixed(0) + '%';
        }

        option = {
            animationEasing: _animationEasingUpdate,
            animationDuration: _animationDuration,
            animationDurationUpdate: _animationDurationUpdate,
            animationEasingUpdate: _animationEasingUpdate,
            dataset: {
                source: [[1, 156]]
            },
            tooltip: {},
            angleAxis: {
                type: 'value',
                startAngle: 0,
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false },
                min: 0,
                max: _valOnRadianMax
            },
            radiusAxis: {
                type: 'value',
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false }
            },
            polar: {},
            series: [{
                type: 'custom',
                coordinateSystem: 'polar',
                renderItem: renderItem
            }]
        };

        setInterval(function () {
            var nextSource = [[1, Math.round(Math.random() * _valOnRadianMax)]];
            myChart.setOption({
                dataset: {
                    source: nextSource
                }
            });
        }, 3000);

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

    </script>
</body>

</html>